﻿<div id="range-selector-demo">
    @(Html.DevExtreme().RangeSelector()
        .ID("range-selector")
        .Chart(c => c
            .CommonSeriesSettings(css => css
                .ArgumentField("Country")
                .Type(SeriesType.Bar)
            )
            .Series(s => s.Add().ValueField("Copper").Name("Copper"))
        )
        .Title("Copper Production in 2013")
        .OnValueChanged("rangeSelector_valueChanged")
        .DataSource(Model, "Country")
        .Value(new[] {"Chile", "Finland" })
    )
    <h2>Total: <span id="total">12,809,000</span> tons</h2>
</div>

<script>
    function rangeSelector_valueChanged(e) {
        var data = e.component.getDataSource().items(),
            total = 0,
            startIndex,
            endIndex;

        $.each(data, function(i, item){
            if(item.Country == e.value[0])
                startIndex = i;
            else if(item.Country == e.value[1])
                endIndex = i;
        });

        if(endIndex) {
            data
                .slice(startIndex, endIndex + 1)
                .forEach(function(item){
                    total += item.Copper;
                });
        }
        else {
            total = data[startIndex].Copper;
        }

        var totalText = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(total);
        $("#total").text(totalText);
    }
</script>
